---
order: 1.4
category: '@threlte/theatre'
title: '<Sequence>'
sourcePath: 'packages/theatre/src/lib/sequence/Sequence.svelte'
type: 'component'
componentSignature:
  {
    props:
      [
        {
          name: 'rate',
          type: 'number',
          default: '1',
          required: false,
          description: 'Set the speed of playback (Theatre.js)'
        },
        {
          name: 'range',
          type: '[number, number] | undefined',
          default: '[0, length]',
          required: false,
          description: 'Choose what part of the animation is played (Theatre.js)'
        },
        {
          name: 'iterationCount',
          type: 'number',
          default: '1',
          required: false,
          description: 'Control how often the animation is played. Set Infinity to keep looping (Theatre.js)'
        },
        {
          name: 'direction',
          type: '"normal" | "reverse" | "alternate" | "alternateReverse"',
          default: 'normal',
          required: false,
          description: 'Choose the direction of animation playback (Theatre.js)'
        },
        {
          name: 'autoplay',
          type: 'boolean',
          default: 'false',
          required: false,
          description: 'Choose whether to automatically play the animation when the component is mounted (Threlte)'
        },
        {
          name: 'delay',
          type: 'number',
          default: '0',
          required: false,
          description: 'When using autoplay, how many milliseconds to wait before starting playback (Threlte)'
        },
        {
          name: 'autoreset',
          type: '"always" | "onMount" | "onDestroy" | undefined',
          default: 'undefined',
          required: false,
          description: 'Reset the playhead when the component is mounted, unmounted**, both or neither (Threlte)'
        },
        {
          name: 'autopause',
          type: 'boolean',
          default: 'false',
          required: false,
          description: 'Whether to pause playback when the component is unmounted (Threlte)'
        },
        {
          name: 'audio',
          type: "{source: AudioBuffer; audioContext: AudioContext; destinationNode: AudioContext['destination'];}",
          default: '{}',
          required: false,
          description: 'Syncronize an audio track to the sequence; see the audio section below (Theatre.js)'
        }
      ],
    bindings:
      [
        { name: 'position', type: 'number | undefined' },
        {
          name: play,
          type: '(opts?) => Promise<boolean> (see Theatre.js Sequence API docs for options)'
        },
        { name: pause, type: '() => void' },
        { name: sequence, type: 'ISequence' },
        { name: sheet, type: 'ISheet' }
      ]
  }
---

Sequences are the heart of the Theatre.js animation system. The sequence represents the animation timeline and provides an API for controlling its playback.
In Threlte 7, you can reactively control animations through the `<Sequence>` component, which you place inside a [`<Sheet>`](/docs/reference/theatre/sheet).

Currently, you can only have one sequence in each sheet. Future versions of Theatre.js are expected to support multisequence sheets.

#### Theatre.js Docs

**Sequence** | [Sequence Manual](https://www.theatrejs.com/docs/latest/manual/sequences) | [Sequence API Reference](https://www.theatrejs.com/docs/0.5/api/core#sequence)

## Usage

The following example shows how `<Sequence>` can be used to build a simple playback controller.

<Example path="theatre/sequence" />

## Lifecycle

Threlte provides lifecycle props to allow you to configure how the sequence playback is connected to the Svelte component lifecycle. See the `autoplay`, `autoreset` and `autopause` props below.

Note that the underlying Theatre.js sheets are persisted even when unmounting a `<Sheet>` component. That's why the sequence doesn't reset automatically when unmounting a `<Sheet>`, and why the `autoreset` options is required.

## Audio

The audio options allow you to attach a soundtrack to your animation sequence. Theatre.js achieves this using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). For more details, see [audio manual](https://www.theatrejs.com/docs/0.5/manual/audio) and [attach audio API reference](https://www.theatrejs.com/docs/0.5/api/core#sequence.attachaudio_opts_)

## Snippet Prop

When using the sequence in a child component, a snippet prop can come in handy.

```svelte
<script lang="ts">
  import { T } from '@threlte/core'
  import { Sheet, Sequence, SheetObject } from '@threlte/theatre'
</script>

<Sheet>
  <Sequence>
    {#snippet children({ play })}
      <SheetObject key="Cube">
        {#snippet children({ Transform })}
          <Transform>
            <T.Mesh onclick={play}>
              <T.BoxGeometry />
              <T.MeshStandardMaterial />
            </T.Mesh>
          </Transform>
        {/snippet}
      </SheetObject>
    {/snippet}
  </Sequence>
</Sheet>
```
